<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html;charset=utf-8" http-equiv="content-type" />
    <title>智能输入提示</title>

    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

    <script type="text/javascript" src="js/j.dimensions.js"></script>

    <script type="text/javascript" src="js/aircity.js"></script>

    <script type="text/javascript" src="js/j.suggest.js"></script>

    <script type="text/javascript">            
    $(function(){                
        $("#arrcity").suggest(citys,{hot_list:commoncitys,dataContainer:'#arrcity_3word',onSelect:function(){$("#city2").click();}, attachObject:'#suggest'});                
        $("#city2").suggest(citys,{hot_list:commoncitys,attachObject:"#suggest2"});            
    });  
    </script>

    <style type="text/css">
        body
        {
            margin: 0;
            padding: 0;
            font-family: "宋体";
            font-size: 13px;
            text-align: center;
        }
        h1
        {
            margin: 0;
            padding: 20px 0;
            font-size: 16px;
        }
        ol
        {
            padding-left: 20px;
            line-height: 130%;
        }
        #box
        {
            width: 600px;
            text-align: left;
            margin: 0 auto;
            padding-top: 80px;
        }
        #suggest, #suggest2
        {
            width: 200px;
        }
        .gray
        {
            color: gray;
        }
        .ac_results
        {
            background: #fff;
            border: 1px solid #7f9db9;
            position: absolute;
            z-index: 10000;
            display: none;
        }
        .ac_results ul
        {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .ac_results li a
        {
            white-space: nowrap;
            text-decoration: none;
            display: block;
            color: #05a;
            padding: 1px 3px;
        }
        .ac_results li
        {
            border: 1px solid #fff;
        }
        .ac_over, .ac_results li a:hover
        {
            background: #c8e3fc;
        }
        .ac_results li a span
        {
            float: right;
        }
        .ac_result_tip
        {
            border-bottom: 1px dashed #666;
            padding: 3px;
        }
    </style>
</head>
<body>
    <div id="box">
        <h1>
            仿机票预定智能输入提示DEMO</h1>
        <input type="hidden" name="arrcity_3word" id="arrcity_3word" value="" />
        <label for="arrcity">
            出发城市：</label><input type="text" name="arrcity" id="arrcity" />
        <div id='suggest' class="ac_results">
        </div>
        <label for="city2">
            目的城市：</label><input type="text" name="city2" id="city2" />
        <div id='suggest2' class="ac_results">
        </div>
        <p>
            具体的功能如下：</p>
        <ol>
            <li>点击输入框，自动列出热门出行城市；</li>
            <li>支持中文/拼音/3字码 输入的智能提示；</li>
            <li>支持键盘方向键选择、回车键确定；</li>
            <li>支持选择后自定义callback函数；</li>
            <li>支持IE6、IE7、IE8、Firefox</li>
        </ol>
    </div>
</body>
</html>
